import React, { useRef, useState, useEffect, useLayoutEffect, forwardRef } from 'react'
import { useGLTF, useAnimations, Html } from '@react-three/drei'
import Scocket from '../Socket/index'
const Computer = forwardRef((props, ref) => {

  const { nodes, materials, animations } = useGLTF('/models/computer.glb')
  const { actions } = useAnimations(animations, ref)
  useEffect(() => {
    for (const k in actions) {
      actions[k].play()
    }
  }, [actions]);
  return (
    <group visible={true} ref={ref} scale={1} dispose={null} position={[0, -1.3, 0]} >
      <group name="Sketchfab_Scene">
        <group name="GLTF_SceneRootNode">
          <group name="image_monitor_anim_1" scale={0.167466}>
            <mesh name="Object_6" geometry={nodes.Object_6.geometry} material={materials.image} />
          </group>
          <group name="cpu_gear001_65" position={[-0.126637, -0.088024, -0.622562]}>
            <mesh name="Object_134" geometry={nodes.Object_134.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear002_66" position={[-0.192446, -0.088024, -0.622562]}>
            <mesh name="Object_136" geometry={nodes.Object_136.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear003_67" position={[-0.126637, -0.088024, -0.744643]}>
            <mesh name="Object_138" geometry={nodes.Object_138.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear004_68" position={[-0.192446, -0.088024, -0.744643]}>
            <mesh name="Object_140" geometry={nodes.Object_140.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear005_69" position={[-0.085261, -0.103788, -0.679564]} scale={0.695895}>
            <mesh name="Object_142" geometry={nodes.Object_142.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear006_70" position={[-0.160797, -0.064289, -0.683756]} scale={[1.495692, 1, 1.495692]}>
            <mesh name="Object_144" geometry={nodes.Object_144.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear007_71" position={[-0.228011, -0.103788, -0.679564]} scale={0.695895}>
            <mesh name="Object_146" geometry={nodes.Object_146.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear008_72" position={[0.181791, -0.088024, -0.622562]}>
            <mesh name="Object_148" geometry={nodes.Object_148.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear009_73" position={[0.115982, -0.088024, -0.622562]}>
            <mesh name="Object_150" geometry={nodes.Object_150.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear010_74" position={[0.181791, -0.088024, -0.744643]}>
            <mesh name="Object_152" geometry={nodes.Object_152.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear011_75" position={[0.115982, -0.088024, -0.744643]}>
            <mesh name="Object_154" geometry={nodes.Object_154.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear012_76" position={[0.223167, -0.103788, -0.679564]} scale={0.695895}>
            <mesh name="Object_156" geometry={nodes.Object_156.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear013_77" position={[0.147631, -0.064289, -0.683756]} scale={[1.495692, 1, 1.495692]}>
            <mesh name="Object_158" geometry={nodes.Object_158.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="cpu_gear014_78" position={[0.080416, -0.103788, -0.679564]} scale={0.695895}>
            <mesh name="Object_160" geometry={nodes.Object_160.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="1_uv_fan001_131" position={[-1.120908, -0.058568, -0.423687]}>
            <mesh name="Object_266" geometry={nodes.Object_266.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="fan002_132" position={[1.123084, -0.058568, -0.423687]}>
            <mesh name="Object_268" geometry={nodes.Object_268.geometry} material={materials.mat_computer_details} />
          </group>
          <group name="rays_anim_134">
            <mesh name="Object_272" geometry={nodes.Object_272.geometry} material={materials.rays} />
          </group>
          <group name="camera_emis_234" rotation={[0.001314, 0.045154, -1.628973]}>
            <mesh name="Object_472" geometry={nodes.Object_472.geometry} material={materials.mat_emis} />
          </group>
          <group name="camera_emis001_329" position={[0, -0.199685, 0.115072]} scale={0.44743}>
            <mesh name="Object_648" geometry={nodes.Object_648.geometry} material={materials.mat_emis} />
            <mesh name="Object_649" geometry={nodes.Object_649.geometry} material={materials.mat_computer_details} />
          </group>
        </group>
        <mesh name="Object_4" geometry={nodes.Object_4.geometry} position={[0.004219, 1.20873, -1.149868]} rotation={[0, -Math.PI / 2, 0]} scale={0.167466} >
          <meshStandardMaterial
            color="black"
            opacity={1}
            emissive="#131313"
            emissiveIntensity={1}
            transparent
          />
          <Html style={{ position: 'relative', pointerEvents: "none" }} rotation-y={Math.PI / 2} position={[0, 0.05, -0.09]} transform occlude>
            <Scocket />
          </Html>
        </mesh>
        <mesh name="Object_8" geometry={nodes.Object_8.geometry} material={materials.mat_computer_details} position={[-1.177925, -0.059268, -0.868571]} rotation={[0, 0, -Math.PI / 2]} />
        <mesh name="Object_16" geometry={nodes.Object_16.geometry} material={materials.mat_big_details} position={[-1.503446, -0.057198, -0.756749]} rotation={[-0.758519, 0, Math.PI / 2]} />
        <mesh name="Object_32" geometry={nodes.Object_32.geometry} material={materials.mat_keyboard} position={[0.524045, -0.030659, 0.73102]} rotation={[0, 0, Math.PI]} />
        {/* <mesh name="Object_44" geometry={nodes.Object_44.geometry} material={materials.mat_lumball} position={[2.141074, -0.037266, 1.277599]} rotation={[0, -0.436332, 0]} /> */}
        <mesh name="Object_270" geometry={nodes.Object_270.geometry} material={materials.rays} />
        <mesh name="Object_416" geometry={nodes.Object_416.geometry} material={materials.mat_emis} position={[-0.000207, 1.402302, -1.258591]} rotation={[-Math.PI / 2, 0, 0]} />
        <mesh name="Object_474" geometry={nodes.Object_474.geometry} material={materials.glass} />
      </group>
    </group>
  )
})

useGLTF.preload('/models/computer.glb')

export default Computer;
